import lessModule from "./index.module.less"
import playImage from "../../../../../../../../assets/image/panoramicMonitoringPage-play.png"
import suspendImage from "../../../../../../../../assets/image/panoramicMonitoringPage-suspend.png"
import upArrowImage from "../../../../../../../../assets/image/panoramicMonitoringPage-upArrow.png"
import downArrowImage from "../../../../../../../../assets/image/panoramicMonitoringPage-downArrow.png"
import showImage from "../../../../../../../../assets/image/panoramicMonitoringPage-timeAxisComponent-show-bg.png"
import hideImage from "../../../../../../../../assets/image/panoramicMonitoringPage-timeAxisComponent-hide-bg.png"
import { useState } from "react"
import { $eventBus } from "../../../../../../../../common/utils"

import HomePage_DateTimePickerComponent from "../../../../../../component/dateTimePicker"
import HomePage_PanoramicMonitoringPage_LayerComponent_TimeAxisComponent_ProgressComponent from "./component/progress"
import { Button } from "antd"
// 主页-全景监控页面-浮层组件-时间轴组件
const HomePage_PanoramicMonitoringPage_LayerComponent_TimeAxisComponent: React.FC = () => {

    const [isShow, setIsShow] = useState<boolean>(false)
    const [isPlaying, setisPlaying] = useState<boolean>(true)
    const [isNew, setIsNew] = useState<boolean>(false)

    const click_handle = () => {
        $eventBus.emit("timeAxis_isShow", !isShow)
        setIsShow(!isShow)


    }
    const change_isNew=()=>{
        setIsNew(false)
    }
    return (
        <div className={lessModule["homePagePanoramicMonitoringPageLayerComponentTimeAxisComponent"]} style={{ height: isShow ? 147 : 97, backgroundImage: `url(${isShow ? showImage : hideImage})` }}>
            <header className={lessModule["homePagePanoramicMonitoringPageLayerComponentTimeAxisComponent-header"]}>
                <div className={lessModule["homePagePanoramicMonitoringPageLayerComponentTimeAxisComponent-header__left"]}>
                    <span>时间轴</span>
                    <img className="homePage-handleImage" src={isPlaying ? playImage : suspendImage} onClick={() => { setisPlaying(!isPlaying) }} />
                </div>
                <img className="homePage-handleImage" src={isShow ? downArrowImage : upArrowImage} onClick={click_handle} />
            </header>
            <main className={lessModule["homePagePanoramicMonitoringPageLayerComponentTimeAxisComponent-main"]}>
                <HomePage_DateTimePickerComponent />
                <HomePage_PanoramicMonitoringPage_LayerComponent_TimeAxisComponent_ProgressComponent isShow={isShow} isPlaying={isPlaying} isNew={isNew} change_isNew={change_isNew}/>
                <Button type="primary" onClick={() => { setIsNew(!isNew) }}>最新</Button>
            </main>
        </div>
    )
}


export default HomePage_PanoramicMonitoringPage_LayerComponent_TimeAxisComponent